<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>免费注册或登录</title>
    <link rel="stylesheet" href="reg.css">

</head>
<body style="background-color: #f3f3f3">
<div id="zong">
    <div id="title" class="clearfix">
        <div id="tel" class="fl"><a href="shouji.html">手机注册</a> </div>
        <div id="email1" class="fl"><a href="#">邮箱注册</a></div>
    </div>
    <div id="input">
        <div class="email"><input id="email" placeholder="请输入您的邮箱"></div>
        <div class="error error1" id="error1"></div>
        <div class="pwd"><input placeholder="设置密码，至少6位字符" id="pwd" type="password"/></div>
        <div class="error error2" id="error2"></div>
        <div id="tiaokuan">点击创建账户，表示同意<a href="#">服务条款</a>和<a href="#">隐私条款</a></div>
        <div id="btn">创建账户</div>
        <div style="text-align: center;font-size:14px" id="tip"></div>
        <div id="xian" class="clearfix">
            <div class="fl"></div>
            <div>或</div>
            <div ></div>
        </div>
        <div id="wechatbtn">
            <img src="tubiaozhizuo-.png"/>
            <span>使用微信登录</span>
        </div>
    </div>
</div>
<div id="help">
    <div>已经拥有账户?</div>
    <div><a href="login.html">登录</a></div>
</div>
</body>
<script src="jquery-3.4.1.js"></script>
<script src="gong.js"></script>
<script>
btn.onclick=function () {
    var emailValue=email.value;
    var regReg=/^\w+@\w+(\.[a-zA-Z]{2,4}){1,2}$/;
    var emailRight=false;
    var pwdRight=false;

    if (emailValue.length == 0) {
        error1.innerHTML = "此项必填";
        emailRight = false;
    }else if(!regReg.test(emailValue)){
        error1.innerHTML = "邮箱号无效";
        emailRight = false;
    }else{
        error1.innerHTML = "";
        emailRight = true;
    }

    var pwdValue = pwd.value;
    var isWarn = false;

    if (pwdValue.length == 0) {
        error2.innerHTML = "此项必填";
        pwdRight = false;
    }else if (pwdValue.length < 6) {
        error2.innerHTML = "密码至少6位，支持数字、字母和符号";
        pwdRight = false;
    }else if(pwdValue.length<8){
        error2.innerHTML = "强度高的密码至少需要8个字符，同时包含大小写字母、数字和符号";
        error2.className = "warn";
        pwd.className = "warnbg";
        isWarn = true;
        pwdRight = true;
    }else{
        error2.innerHTML = "";
        pwdRight = true;
    }
    if(!isWarn){
        error2.className = "error";
        pwd.className = "";
    }

    if(emailRight&&pwdRight){
        ajax("/bijiuser/checktel",{tel:emailValue},function(data){
            if(data){
                // 注册
                ajax("/bijiuser/add",{tel:emailValue,pwd:pwdValue,accountType:1},function(data){
                    if(data){
                        tip.innerHTML = "注册成功！已经发送邮件到您的邮箱，请到邮箱激活您的帐号！";
                        setTimeout(function(){
                            location = "http://mail.qq.com";
                        },2000);
                    }else{
                        tip.innerHTML = "注册失败！";
                    }
                }) ;
            }else{
                error1.innerHTML = "此邮箱号已经注册！";
            }
        });
    }
};
email.onfocus = function(){
    error1.innerHTML = "";
};
pwd.onfocus = function(){
    error2.innerHTML = "";
};

pwd.onkeyup = function(){
    var pwdValue = pwd.value;

    var isWarn = false;

    if (pwdValue.length == 0) {
        error2.innerHTML = "此项必填";
    }else if (pwdValue.length < 6) {
        error2.innerHTML = "密码至少6位，支持数字、字母和符号";
    }else if(pwdValue.length<8){
        error2.innerHTML = "强度高的密码至少需要8个字符，同时包含大小写字母、数字和符号";
        error2.className = "warn";
        pwd.className = "warnbg";
        isWarn = true;
    }else{
        error2.innerHTML = "";
    }

    if(!isWarn){
        error2.className = "error";
        pwd.className = "";
    }

}
</script>
</html>